<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天天生鲜</title>
    <link rel="stylesheet" href="../CSS/index.css">
    <!-- Bootstrap 3.3.7 css 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery 1.9.1 -->
    <script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 js 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="outer">
    <!--    导航条    -->
    <nav class="navbar navbar-default">
        <div class="container">
            <!--        导航栏左侧        -->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">欢迎来到天天生鲜</a>
            </div>
            <!--   导航栏右侧   -->
            <div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#">用户中心</a></li>
                    <li><a href="#">我的购物车</a></li>
                    <li><a href="#">我的订单</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!--  logo + 搜索框 + 购物车按钮 -->
    <div class="container">
        <!--     logo       -->
        <div class="col-md-3">
            <img src="../images/logo.png" alt="">
        </div>

        <!--      搜索框      -->
        <div class="col-md-6">
            <div class="input-group search">
                <input type="text" class="form-control" placeholder="搜索商品">
                <span class="input-group-btn">
                        <button class="btn btn-success">搜&nbsp;&nbsp;&nbsp;索</button>
                    </span>
            </div>
        </div>

        <!--      购物车按钮      -->
        <div class="col-md-3">
            <button class="btn btn-success pull-right">
                <img src="../images/cart.png" alt="">
                我的购物车
                <span class="badge badge-light">4</span>
            </button>
        </div>
    </div>

    <!--    商品分类 + 选项卡    -->
    <div class="container menu">
        <!--    商品分类        -->
        <div class="col-md-2">
            <ul class="list-group shop_list">
                <li class="list-group-item active">
                    全部商品分类
                </li>
                <li class="list-group-item">
                    <a href="#">
                        <img src="../images/fruit.png" alt="">
                        新鲜水果&nbsp;&nbsp;&nbsp;>
                    </a>
                </li>
                <li class="list-group-item">
                    <a href="#">
                        <img src="../images/haixian.png" alt="">
                        海鲜水产&nbsp;&nbsp;&nbsp;>
                    </a>
                </li>
                <li class="list-group-item">
                    <a href="#">
                        <img src="../images/pig.png" alt="">
                        猪牛羊肉&nbsp;&nbsp;&nbsp;>
                    </a>
                </li>
                <li class="list-group-item">
                    <a href="#">
                        <img src="../images/egg.png" alt="">
                        禽类蛋品&nbsp;&nbsp;&nbsp;>
                    </a>
                </li>
                <li class="list-group-item">
                    <a href="#">
                        <img src="../images/vegetable.png" alt="">
                        新鲜蔬菜&nbsp;&nbsp;&nbsp;>
                    </a>
                </li>
                <li class="list-group-item">
                    <a href="#">
                        <img src="../images/frozen.png" alt="">
                        速冻食品&nbsp;&nbsp;&nbsp;>
                    </a>
                </li>
            </ul>
        </div>


        <div class="col-md-10">
            <!--    选项卡         -->
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#">首页</a>
                </li>
                <li class="activate">
                    <a href="#">手机生鲜</a>
                </li>
                <li class="activate">
                    <a href="#">抽奖</a>
                </li>
            </ul>

            <!--  轮播图  -->
            <div class="col-md-9">
                <div id="mycarousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#mycarousel" data-slide-to="0"></li>
                        <li data-target="#mycarousel" data-slide-to="1"></li>
                        <li data-target="#mycarousel" data-slide-to="2"></li>
                        <li data-target="#mycarousel" data-slide-to="3"></li>
                    </ol>

                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="../images/slide.jpg" alt="">
                        </div>
                        <div class="item">
                            <img src="../images/slide02.jpg" alt="">
                        </div>
                        <div class="item">
                            <img src="../images/slide03.jpg" alt="">
                        </div>
                        <div class="item">
                            <img src="../images/slide04.jpg" alt="">
                        </div>
                    </div>
                    <a href="#mycarousel" class="left carousel-control" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>

                    <a href="#mycarousel" class="right carousel-control" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
            </div>

            <!--  图片展示  -->
            <div class="col-md-3 show_img">
                <img src="../images/adv01.jpg" alt="">
                <img src="../images/adv02.jpg" alt="">
            </div>
        </div>
    </div>

    <!--  产品展示  -->
    <div class="container">
        <!--  新鲜水果  -->
        <div class="panel panel-success">
            <div class="panel-heading">
                <span>新鲜水果</span>
                <span class="pull-right"><a href="#">查看更多...</a></span>
            </div>
            <div class="panel-body">
                <div class="col-md-2">
                    <div class="item">
                        <img src="../images/banner01.jpg" alt="" class="banner">
                    </div>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
            </div>
        </div>

        <!--  海鲜水产  -->
        <div class="panel panel-success">
            <div class="panel-heading">
                <span>海鲜水产</span>
                <span class="pull-right"><a href="#">查看更多...</a></span>
            </div>
            <div class="panel-body">
                <div class="col-md-2">
                    <div class="item">
                        <img src="../images/banner02.jpg" alt="" class="banner">
                    </div>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
            </div>
        </div>

        <!--  猪牛羊肉  -->
        <div class="panel panel-success">
            <div class="panel-heading">
                <span>猪牛羊肉</span>
                <span class="pull-right"><a href="#">查看更多...</a></span>
            </div>
            <div class="panel-body">
                <div class="col-md-2">
                    <div class="item">
                        <img src="../images/banner03.jpg" alt="" class="banner">
                    </div>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
            </div>
        </div>

        <!--  禽类蛋品  -->
        <div class="panel panel-success">
            <div class="panel-heading">
                <span>禽类蛋品</span>
                <span class="pull-right"><a href="#">查看更多...</a></span>
            </div>
            <div class="panel-body">
                <div class="col-md-2">
                    <div class="item">
                        <img src="../images/banner04.jpg" alt="" class="banner">
                    </div>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
            </div>
        </div>

        <!--  新鲜蔬菜  -->
        <div class="panel panel-success">
            <div class="panel-heading">
                <span>新鲜蔬菜</span>
                <span class="pull-right"><a href="#">查看更多...</a></span>
            </div>
            <div class="panel-body">
                <div class="col-md-2">
                    <div class="item">
                        <img src="../images/banner05.jpg" alt="" class="banner">
                    </div>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
            </div>
        </div>

        <!--  速冻食品  -->
        <div class="panel panel-success">
            <div class="panel-heading">
                <span>速冻食品</span>
                <span class="pull-right"><a href="#">查看更多...</a></span>
            </div>
            <div class="panel-body">
                <div class="col-md-2">
                    <div class="item">
                        <img src="../images/banner06.jpg" alt="" class="banner">
                    </div>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
                <div class="col-md-2">
                    <a href="#" class="thumbnail">
                        <p class="text-center">柠檬</p>
                        <br>
                        <img src="../images/goods/goods001.jpg" alt="">
                        <p class="text-center">￥30.00元</p>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!--  页面底部  -->
    <div class="container-fluid">
        <div class="footer">
            <p class="text-center foot-link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>
            </p>
            <p class="text-center">CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
            <p class="text-center">电话：010-****888 京ICP备*******8号</p>
        </div>
    </div>
</div>
</body>
</html>